<template>
  <div class="font-container">
    <van-row type="flex" gutter="12" justify="start">
      <van-col
        v-for="item in fontListData"
        :key="item.id"
        span="6"
        class="image-item"
        @click="handleFontFamily(item)">
        <van-image
          width="100%"
          height="40px"
          radius="6"
          fit="contain"
          class="img-cover"
          :src="item.image"
        />
        <span class="font-name">{{ item.name }}</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
// import fontListData from '../../lib/font'
import { allFontList } from '@/utils/api';
export default {
  data() {
    return {
      fontListData: [],
      fontUrl: 'https://aliyun-design.guxitk.com/font/',
    }
  },

  created() {
    this.allFontList();
  },

  methods: {

    // 获取字体
    allFontList() {
      allFontList().then(result => {
        if (result && result.data && result.data.length > 0) {
          let data = result.data;
          data.forEach(item => {
            item.file = `${item.font_name}`;
          })
          this.fontListData = data;
        }
      })
    },

    // 选择字体
    handleFontFamily(item) {
      this.handAccountCanvas.downLoadFont({
        name: item.title,
        url: item.file
      }).then(result => {
        this.handAccountCanvas.updateTextBox({
          type: 'fontFamily',
          content: item.title,
          src: item.file
        })
      });
    }
  }
}
</script>

<style lang="less" scoped>
  .font-container{
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 18px;

    .image-item{
      margin-bottom: 12px;
      text-align: center;
    }

    .img-cover{
      width: 100%;
      background: #eaeaea;
    }

    .font-name{
      font-size: 12px;
      height: 15px;
      width: 80%;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: auto;
    }
  }
</style>
